<template>
	<view class="page">
		<view class="top_box">
			<view class="prompt">
				<view class="back iconfont icon-fanhui" @click="goBack"></view>

				<view class="prompt_top" v-if="mood.payStatus==0">
					待支付
				</view>
				<view class="prompt_top" v-else-if="mood.payStatus==1">
					已支付
				</view>
				<view class="prompt_top" v-else-if="mood.payStatus==2">
					已取消
				</view>
				<view class="prompt_top" v-else-if="mood.payStatus==3">
					待发货
				</view>
				<view class="prompt_top" v-else-if="mood.payStatus==4">
					待收货
				</view>
				<view class="prompt_top" v-else-if="mood.payStatus==5">
					已完成
				</view>
				<view class="prompt_top" v-else-if="mood.payStatus==6">
					待退款
				</view>
				<view class="prompt_top" v-else-if="mood.payStatus==7">
					已退款
				</view>
				<view class="prompt_bottom" v-if="mood.payStatus==0">15分钟后订单关闭，请及时付款哦</view>
			</view>
		</view>
		<view class="addressBox">
			<!-- 	<view v-if="type == 3" class="transportBox">
				<view class="transportInfo">
					<view class="icon">
						<u-icon size="20" name="car"></u-icon>
					</view>
					<view class="address">
						[重庆市] [重庆综合邮件处理中心]，已发下一站
						<view class="contact">2023.04.17 10:16</view>
					</view>
				</view>
				<view class="right">
					<u-icon size="20" name="arrow-right"></u-icon>
				</view>
			</view> -->
			<view class="addressInfo">
				<view class="info">
					<view class="icon">
						<u-icon size="20" name="map"></u-icon>
					</view>
					<view class="address" style="width: 535rpx;">
						{{mood.userAddress.address}}
						<view class="contact">{{mood.userAddress.contact}} {{mood.userAddress.phone}}</view>
					</view>
				</view>
				<view class="right">
					<!-- <u-icon size="22" name="arrow-right"></u-icon> -->
				</view>
			</view>
		</view>
		<view class="order" @click="goShopDetails(mood.productId)">
			<view class="item" v-for="(item,i) in mood.orderProductList">
				<view class="left">
					<view class="dianpu">{{item.body}}</view>
					<image :src="item.coverPictureId" mode="aspectFill" style="border-radius: 10rpx;"></image>
				</view>
				<view class="content">
					<view class="title u-line-2">{{item.title}}</view>
					<view class="type">数量：{{item.buyCount}}</view>
				</view>
				<view class="right">
					<view class="price" style="font-size: 30rpx;">￥{{item.unitPrice}}</view>
				</view>
			</view>
		</view>
		<view class="priceBox">
			<view class="priceItem">
				<view class="title">商品小计</view>
				<view class="price" style="font-size: 30rpx;">￥{{mood.needPayAmount }}</view>
			</view>
			<view class="priceItem" v-if="mood.payStatus==7||mood.payStatus==6">
				<view class="title">现金退款</view>
				<view class="price" style="font-size: 30rpx;">￥{{mood.totalPrice - mood.deductionPrice}}</view>
			</view>
			<view class="priceItem" v-if="mood.payStatus==7||mood.payStatus==6">
				<view class="title">礼品卡退回</view>
				<view class="price" style="font-size: 30rpx;">￥{{mood.deductionPrice}}</view>
			</view>
		</view>
		<view class="infoBox">
			<view class="info_item">
				<view class="title">下单时间</view>
				<view class="right">{{mood.createTime}}</view>
			</view>
			<view class="info_item">
				<view class="title">订单编号</view>
				<view class="right">{{mood.productId}}</view>
			</view>
			<view class="info_item" v-if="mood.payStatus != 0">
				<view class="title">支付方式</view>
				<view class="right">微信支付</view>
			</view>
			<view class="info_item" v-if="mood.isEvaluate!=1">
				<view class="title">评价</view>
				<view class="right">{{mood.evaluate}}</view>
			</view>
			<view class="info_item" v-if="mood.isEvaluate!=1">
				<view class="title">评分</view>
				<view class="right">
					<u-rate :count="count" v-model="mood.score" size='18' readonly activeColor='#F9A41F'></u-rate>
				</view>
			</view>
		</view>
		<view class="bottom_btn">
			<view v-if="mood.payStatus==0" class="logistics btn" @click="quexiao">取消订单</view>
			<view class="" v-if="mood.payStatus==5||mood.deliverStatus==3">
				<view class="logistics btn" v-if="mood.refundStatus!=6" @click="goRefund(mood)">申请退款</view>
			</view>
			<view class="evaluate btn" v-if="mood.payStatus==5&mood.isEvaluate==1" @click="pinjia">去评价</view>
			<view class="evaluate btn" v-if="mood.payStatus==0" @click="quzhifu">去支付</view>
			<view class="evaluate btn" v-if="mood.deliverStatus==3" @click="tixin">提醒发货</view>
			<view class="evaluate btn" v-if="mood.deliverStatus==4" @click="submit"> 确认收货</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#21B070'
				},
				type: 1,
				id: '',
				mood: {},
			};
		},
		onLoad(e) {
			this.id = e.id
			this.cread()
		},
		methods: {
			pinjia() {
				uni.redirectTo({
					url: '/pages/my/order/evaluate?id=' + this.id
				})
			},
			goShopDetails(productId) {
				uni.navigateTo({
					url: '/pages/index/shopDate/shopDate?id=' + productId
				})
			},
			goRefund(res) {
				let data = JSON.stringify(res)
				uni.setStorageSync('draw', data)
				uni.navigateTo({
					url: '/pages/my/order/applicationDrawback'
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			async quexiao() {
				let that = this
				let res = await this.$api.request('pay/order/cancel/' + this.id)
				if (res.code == '200') {
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})

					setTimeout(() => {
						that.cread()
					}, 1000)

				}
			},
			async cread() {
				let res = await this.$api.request('pay/order/get/' + this.id)
				console.log(res, 111)
				this.mood = res.data
			},
			submit() {
				let params = {
					id: this.id,
				}
				this.$api.request('pay/order/complete', 'get', params).then(res => {
					if (res.code == 200) {
						this.orderList = []
						this.getList()
						uni.showToast({
							title: '确认成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: '确认失败',
							icon: 'error'
						})
					}
				})
			},
			tixin() {
				let that = this
				this.$utils.throttle(function() {
					that.$api.request('pay/order/remind', 'get', {
						id: that.id
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '提醒成功',
								icon: 'success'
							})
						}
					})
				}, 1100)()
			},
			async quzhifu() {
				let that = this
				let res = await this.$api.request('pay/order/again/' + this.id)
				if (res.code == '200') {
					let mood = JSON.parse(res.data.displayContent)
					uni.requestPayment({
						provider: 'wxpay', // 服务提提供商
						timeStamp: mood.timeStamp, // 时间戳
						nonceStr: mood.nonceStr, // 随机字符串
						package: mood.packageValue,
						signType: mood.signType, // 签名算法
						paySign: mood.paySign, // 签名
						success: function(res) {
							that.cread()
						},
						fail: function(err) {
							console.log('支付失败', err);
						}
					});
				}
			}

		}
	};
</script>

<style scoped lang="scss">
	.page {
		height: 100vh;
		background-color: #f5f5f5;
	}

	.top_box {
		width: 100%;
		padding-bottom: 22rpx;
		background-color: #D42A1B;

		height: 308rpx;
		border-radius: 0 0 8% 8%;

		.back {
			position: absolute;
			left: 20rpx;
			z-index: 999;
			font-size: 36rpx;
			font-weight: bold;

		}

		.prompt {
			padding-top: 80rpx;
			text-align: center;
			color: #fefffe;

			.prompt_top {
				font-size: 36rpx;
				line-height: 50rpx;

				.icon {
					margin-right: 14rpx;
				}

				margin-bottom: 16rpx;
			}

			.prompt_bottom {
				font-size: 24rpx;
			}
		}
	}

	.addressBox {
		margin: -120rpx auto 0;
		width: 690rpx;
		// height: 274rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 32rpx 20rpx 30rpx 30rpx;
		box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);

		.addressInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.info {
				display: flex;
				margin-right: 44rpx;

				.icon {
					color: #21b070;
					margin-right: 20rpx;
				}

				.address {
					font-size: 30rpx;
					color: #333333;
					line-height: 44rpx;

					.contact {
						color: #999999;
						line-height: 34rpx;
						font-size: 24rpx;
					}
				}
			}
		}

		.transportBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.transportInfo {
				display: flex;
				margin-right: 44rpx;

				.icon {
					color: #21b070;
					margin-right: 20rpx;
				}

				.address {
					font-size: 24rpx;
					color: #333333;
					line-height: 36rpx;

					.contact {
						color: #999999;
						line-height: 36rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.order {
		background-color: #ffffff;
		margin: 20rpx 30rpx 0;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 28rpx;
		box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);

		.item {
			justify-content: space-between;
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 30rpx;

				image {
					width: 130rpx;
					height: 130rpx;
					// border-radius: 10rpx;
				}

				.dianpu {
					font-size: 26rpx;
					line-height: 36rpx;
					color: #333333;
					margin-bottom: 16rpx;
				}
			}

			.content {
				margin-top: 56rpx;

				.title {
					font-size: 28rpx;
					line-height: 36rpx;
					color: #333333;
				}

				.type {
					margin: 20rpx 0 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 42rpx;
				margin-top: 52rpx;
				text-align: right;
				color: #333333;
				font-size: 24rpx;
				line-height: 30rpx;
			}
		}
	}

	.priceBox {

		background-color: #ffffff;
		margin: 20rpx 30rpx 0;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 30rpx 28rpx;
		box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);

		.priceItem {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 24rpx;
				line-height: 50rpx;
				color: #666666;
			}

			.price {
				font-size: 22rpx;
				color: #f55726;
				line-height: 30rpx;
			}
		}


	}

	.infoBox {
		background-color: #ffffff;
		margin: 20rpx 30rpx 0;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);

		.info_item {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 24rpx;
				line-height: 50rpx;
				color: #999999;
			}

			.right {
				font-size: 24rpx;
				line-height: 50rpx;
				color: #333333;
			}
		}
	}

	.bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 20rpx 0rpx;
		box-shadow: 0rpx -3rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);

		.btn {
			line-height: 58rpx;
			width: 140rpx;
			border-radius: 28rpx;
			border: 1rpx solid #999999;
			font-size: 24rpx;
			text-align: center;
			color: #333333;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.evaluate {
			color: #21b070;
			border: 1rpx solid #21b070;
		}
	}
</style>